<template>

    <div class="am-u-sm-12 am-scrollable-horizontal">
      <div class="am-u-sm-12 am-text-left am-margin-top-sm bold-font">第一步</div>
      <div class="am-u-sm-12 am-text-left am-margin-top-sm bold-font">原班信息</div>
      <table width="100%" class="am-table am-table-bordered am-table-compact ">
        <colgroup>
          <col width="100"/>
          <col width="100"/>
          <col width="100"/>
          <col width="100"/>
          <col width="100"/>
          <col width="100"/>
        </colgroup>
        <tbody>
        <tr>
          <td class="bgColor">期数：</td>
          <td>{{changeClass.srcClass.periodName}}</td>
          <td class="bgColor">业务组：</td>
          <td>{{changeClass.srcClass.busTeamName}}</td>
          <td class="bgColor">班级名称：</td>
          <td>{{changeClass.srcClass.className}}</td>
        </tr>
        <tr>
          <td class="bgColor">班级编号：</td>
          <td>{{changeClass.srcClass.classNo}}</td>
          <td class="bgColor">任课老师：</td>
          <td>{{changeClass.srcClass.teacherName}}</td>
          <td class="bgColor">教室：</td>
          <td>{{changeClass.srcClass.roomName}}</td>
        </tr>
        <tr>
          <td class="bgColor">开课日期：</td>
          <td>{{changeClass.srcClass.startCourseTime | formatDate}}</td>
          <td class="bgColor">报读总讲次：</td>
          <td>{{changeClass.regLectureAmount}}</td>
          <td class="bgColor">已交金额：</td>
          <td>{{changeClass.srcStudentReg.payAmount}}</td>
        </tr>
        <tr>
          <td class="bgColor">从第几讲开始转</td>
          <td colspan="7">
            <template v-for="(item,index) in availableRefundLectures">
              <label  class="am-checkbox-inline">
                <input type="radio" :value="item.lectureNo" name="changeLectureFrom" v-model="changeClass.changeLectureFrom"> 第{{item.lectureNo}}讲<span class="am-text-danger">({{ { '0':'出勤', '1':'缺勤', '2':'迟到', '3':'请假' }[item.attendanceStatus] || '未考勤' }})</span>
              </label>
              <br v-if="( index + 1 ) % 6 == 0" >
            </template>

          </td>
        </tr>

        </tbody>
      </table>

      <div class="am-u-sm-12 am-text-center am-margin-top-lg">
        <button type="button" class="am-btn am-btn-primary" @click="nextStep">下一步</button>
        <a href="javascript: void(0)" data-am-modal-close>
          <button type="button" class="am-btn am-btn-primary">取消</button>
        </a>
      </div>

    </div>



</template>
<style>
  .bold-font {
    font-weight: bold;
  }

  .bgColor {
    background-color: #eee;
    text-align: center;
  }

</style>

<script>
  import io from '../../lib/io'
  import math from '../../lib/math'

  import Pagination from '../base/Pagination'

  export default{
    data: function () {
      return {
        changeClass:{
          srcClass: {},
          srcStudentReg : {},
          reason:'与原校时间冲突',
          changeLectureFrom: 0,
          remainingAmount :0
        },
        amountOfEachLecture:0,
        availableRefundLectures:[]
      }
    },
    props: ['regId', 'args'],
    created:function(){
      if(this.regId){
        this.loadTableData(this.regId)
        this.loadAttend()
      }
    },
    watch: {
      regId: function (val) {
        if(val){
          this.loadTableData(val)
          this.loadAttend()
        }
      },
      'changeClass.changeLectureFrom':function(){
          this.calRemainAmount()
      }
    },
    methods: {

      loadTableData: function (regId) {
        if (regId) {
          var _this = this
          io.post(io.apiAdminStudentRegDetail, {regId: regId},
            function (ret) {
              if (ret.success) {
                _this.changeClass.reason = '与原校时间冲突'
                _this.changeClass.changeLectureFrom = 0
                _this.changeClass.remainingAmount = 0
                _this.changeClass.srcClass = ret.data.courseClass
                _this.changeClass.srcStudentReg = ret.data.studentReg
                _this.changeClass.regLectureAmount = ( ret.data.studentReg.endAmount - ret.data.studentReg.startAmount) + 1
                _this.amountOfEachLecture = math.div(ret.data.studentReg.totalAmount - ret.data.studentReg.refundAmount  , _this.changeClass.regLectureAmount )
                _this.calRemainAmount()
              } else {
                _this.$alert(ret.desc)
              }
            })
        }
      },
      loadAttend: function () {
        var _this = this
        io.post(io.apiAdminQueryAttendOfStudent, {regId: this.regId},
          function (ret) {
            if (ret.success) {
              _this.availableRefundLectures = ret.data
            } else {
              _this.$alert(ret.desc)
            }
          })
      },
      calRemainAmount :function(){
        this.changeClass.remainingAmount = this.changeClass.changeLectureFrom == 0 ? 0 : math.round( math.mul(this.changeClass.srcStudentReg.endAmount - this.changeClass.changeLectureFrom  + 1  , this.amountOfEachLecture ) , 2)
      },
      nextStep: function () {
        if(!this.changeClass.changeLectureFrom){
          this.$alert('请确认从哪一讲转')
          return
        }
        this.$emit('goStep', 'step-two', this.changeClass )
      }
    }
  }


</script>
